<template>
	<div  class = "card2" >
		<el-dialog :title=item.projectName :visible.sync = item.isPrint  v-for="(item,n) in pro" :key="n"  v-loading="loading">
	
			<div><span>{{item.detail}}</span></div>
	
			<el-divider></el-divider>
	
			<div>
			
			<el-row>
				<el-col :span="12"><h4>负责人：</h4><span>{{item.leader}}</span></el-col>
				<el-col :span="12"><h4>类型：</h4><span>{{item.type}}</span></el-col>
			</el-row>
			</div>
	
			<el-divider></el-divider>
			<div><h4>指导教师：</h4><span>{{item.teacher}}</span></div>
	
			<el-divider></el-divider>
	
			<div >
				<h4>
					<el-row>
						<el-col :span="19">团队成员：</el-col>
						<el-col :span="4">人数：{{item.members.length}}/{{item.userNum}}</el-col>
						<el-col :span="1">
							<el-button class="el-icon-plus" type="primary" size="small" circle v-if="item.members.length < item.userNum" @click="part(item.id)">	
							</el-button>
						</el-col>
					</el-row>
				</h4>
				<!-- <span></span><br> -->
				<template v-for="(i,n) in item.members" >
					<span :key="n">{{i.name}}</span>
					<el-divider direction="vertical" :key="n"></el-divider>
				</template>
			</div>
			<el-divider></el-divider>
			<div>
				<h4>创建时间：</h4>
				{{item.time}}
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		
	    props:{
	    	 pro:{
	    	        type:Array 
	    	    },
	    },
	   
	    data:function () {
			
	       
			
			return{
				
				}
		},
	    
	    
	    methods:{
			part: async function(n){
				this.$confirm('确认参加？', '确认信息', {
					distinguishCancelAndClose: true,
					confirmButtonText: '确认',
					cancelButtonText: '取消'
				})
				.then(async () => {
					this.loading = true;
					let res = await this.text(this.$api.participateProject+"?id="+n)
					
					if (res.code === 200) {
						this.$message({
							message: '加入成功',
							type: 'success'
							});
						location.reload();
						
					}else if(res.code === 50031){
						this.$message.error('你已经在项目中');
					} else{
							this.$message.error('请求失败或者接口返回失败');
					} 
					this.loading = false;
				})
			},
			}
	}
</script>

<style scoped>
	@import url("../assets/style/pro.css");
</style>
